<!-- 实习期变更 -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div>实习期变更</div>
    </template>
    <div>
      <a-form :model="formData" auto-label-width>
        <a-row>
          <a-col :span="12">
            <a-form-item field="" label="原实习期："></a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="" label="变更后实习期："></a-form-item>
          </a-col>

          <!-- <a-col :span="12">
            <a-form-item field="" label="实习期：">
              <a-input v-model="formData.prev.date" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="" label="实习期：">
              <a-input v-model="formData.curr.date"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-item field="" label="实习期开始时间：">
              <a-date-picker v-model="formData.prev.startTime" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="" label="实习期开始时间：">
              <a-date-picker v-model="formData.curr.startTime" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item field="" label="实习期结束时间：">
              <a-date-picker v-model="formData.prev.endTime" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="" label="实习期结束时间：">
              <a-date-picker v-model="formData.curr.endTime" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    prevTime: string;
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'intershipTimeChange']);

const formData = reactive({
  prev: {
    date: '',
    startTime: '',
    endTime: ''
  },
  curr: {
    date: '',
    startTime: '',
    endTime: ''
  }
});

watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      [formData.prev.startTime, formData.prev.endTime] =
        props.prevTime.split(',');
    }
  }
);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

// 保存
const handleOk = () => {
  modalVisible.value = false;
  emit('intershipTimeChange', formData);
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.content {
  .dept {
    :deep(.arco-form-item-content-wrapper) {
      width: 200%;
    }
  }
}
</style>
